React Bootstrap — Responsive Tables and Tabs

React Bootstrap is one version of Bootstrap made for React.

It’s a set of React components that have Bootstrap styles.

In this article, we’ll look at how to add responsive tables and tabs with React Bootstrap.

Responsive

We can add a responsive prop to make the table responsive.

To make it always responsive, we add the prop without a value.

So we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Table from "react-bootstrap/Table";

export default function App() {
  return (
    <>
      <Table responsive>
        <thead>
          <tr>
            <th>ID</th>
            <th>First Name</th>
            <th>Last Name</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>james</td>
            <td>smith</td>
          </tr>
          <tr>
            <td>2</td>
            <td>mary</td>
            <td>jones</td>
          </tr>
          <tr>
            <td>3</td>
            <td colSpan="2">larry</td>
          </tr>
        </tbody>
      </Table>
    </>
  );
}

We can also make it responsive on specific breakpoints.

We can set sm , md , lg , or xl to make them responsive on those breakpoints:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Table from "react-bootstrap/Table";

export default function App() {
  return (
    <>
      <Table responsive="sm">
        <thead>
          <tr>
            <th>ID</th>
            <th>First Name</th>
            <th>Last Name</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>james</td>
            <td>smith</td>
          </tr>
          <tr>
            <td>2</td>
            <td>mary</td>
            <td>jones</td>
          </tr>
          <tr>
            <td>3</td>
            <td colSpan="2">larry</td>
          </tr>
        </tbody>
      </Table>
    </>
  );
}

With sm , we make the table responsive if the screen is small.

Tabbed Components

We can add a tabbed interface with the Tabs and Tab components.

It can be controlled which means it’s controlled by a state.

Or it can be uncontrolled which means there are no states associated with it.

To add an uncontrolled tab component, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Tabs from "react-bootstrap/Tabs";
import Tab from "react-bootstrap/Tab";

export default function App() {
  return (
    <>
      <Tabs defaultActiveKey="foo">
        <Tab eventKey="foo" title="foo">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
          rutrum fermentum massa, eu rhoncus arcu ultricies quis. Fusce accumsan
          orci et egestas viverra.
        </Tab>
        <Tab eventKey="bar" title="bar">
          Integer tincidunt semper nulla sit amet sollicitudin. Orci varius
          natoque penatibus et magnis dis parturient montes, nascetur ridiculus
          mus.
        </Tab>
        <Tab eventKey="baz" title="baz" disabled>
          Fusce sit amet euismod elit. Aliquam lacinia velit a lacus congue, nec
          rutrum odio tempus. Donec eu sodales nunc, in convallis elit.
        </Tab>
      </Tabs>
    </>
  );
}

We have the Tabs component to create the tabbed interface.

Tab is the component for adding each tab.

eventKey is the key for each tab.

title is created for the title of the tab.

disabled makes a tab disabled.

defaultActiveKey is the default event key, which lets us set the default tab.

Controlled Tabs

We can also set the state to control the tabs.

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Tabs from "react-bootstrap/Tabs";
import Tab from "react-bootstrap/Tab";

export default function App() {
  const [key, setKey] = React.useState("bar");

return (
    <>
      <Tabs activeKey={key} onSelect={k => setKey(k)}>
        <Tab eventKey="foo" title="foo">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
          rutrum fermentum massa, eu rhoncus arcu ultricies quis. Fusce accumsan
          orci et egestas viverra.
        </Tab>
        <Tab eventKey="bar" title="bar">
          Integer tincidunt semper nulla sit amet sollicitudin. Orci varius
          natoque penatibus et magnis dis parturient montes, nascetur ridiculus
          mus.
        </Tab>
        <Tab eventKey="baz" title="baz" disabled>
          Fusce sit amet euismod elit. Aliquam lacinia velit a lacus congue, nec
          rutrum odio tempus. Donec eu sodales nunc, in convallis elit.
        </Tab>
      </Tabs>
    </>
  );
}

to have tabs that are controlled by the key state.

We have the activeKey to set the key of the active tab.

We set which tab is active by setting keyto the eventKey of the tab.

onSelect will let us set key to the eventKey value of the active tab when a tab is clicked.

No Animation

We can disable animation with the transition set to false .

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Tabs from "react-bootstrap/Tabs";
import Tab from "react-bootstrap/Tab";

export default function App() {
  return (
    <>
      <Tabs defaultActiveKey="foo" transition={false}>
        <Tab eventKey="foo" title="foo">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
          rutrum fermentum massa, eu rhoncus arcu ultricies quis. Fusce accumsan
          orci et egestas viverra.
        </Tab>
        <Tab eventKey="bar" title="bar">
          Integer tincidunt semper nulla sit amet sollicitudin. Orci varius
          natoque penatibus et magnis dis parturient montes, nascetur ridiculus
          mus.
        </Tab>
        <Tab eventKey="baz" title="baz" disabled>
          Fusce sit amet euismod elit. Aliquam lacinia velit a lacus congue, nec
          rutrum odio tempus. Donec eu sodales nunc, in convallis elit.
        </Tab>
      </Tabs>
    </>
  );
}

to disable animation with transition set to false .

Conclusion

We can make tables responsive with React Bootstrap.

Also, we can add tabs with the Tabs component.